<template>
    <div>
        <el-container style="height: 500px; border: 1px solid #eee">
            <Home></Home>
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><el-link href="">设置</el-link></el-dropdown-item>
                            <el-dropdown-item><el-link type="success" href="/fee">刷新</el-link></el-dropdown-item>
                            <el-dropdown-item><el-link type="danger" href="/login">退出</el-link></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>桑尼酒店</span>
                </el-header>

                <!--                //写自己想要的el-main-->
                <el-main>
                    <el-row :gutter="25">
                        <el-col :span="10">
                            <el-input placeholder="请输入搜索内容" >
                                <el-button slot="append" icon="el-icon-search" ></el-button>
                            </el-input>
                        </el-col>

                        <el-col :span="4">
                            <el-button type="primary" @click="addDialogVisible = true">添加房间</el-button>
                        </el-col>
                    </el-row>
                    <el-form ref="houseData">
                        <el-table
                                :data="tableData"
                                :show-header="true"
                                border
                                style="width: 100%">
                            <!--                        <router-link :to="{name: 'feeCompile', params: {feeId: scope.row.id}}"></router-link>-->
                            <el-table-column
                                    fixed
                                    prop="id"
                                    label="序号"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.id"></el-input>
                                    <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.id}}</span>
                                </template>
                                <!--                            <span>{{feePage.id}}</span>-->
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="房间号"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.name"></el-input>
                                    <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.name}}</span>
                                </template>
                                <!--                            <span>{{feePage.id}}</span>-->
                            </el-table-column>
                            <el-table-column
                                    prop="amount"
                                    label="可住人数"
                                    width="220">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.amount"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.amount}}</span>
                                </template>
                                <!--                            <span>{{feePage.id}}</span>-->
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="单价"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.price"></el-input>
                                    <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.price}}</span>
                                </template>
                                <!--                            <span>{{feePage.id}}</span>-->
                            </el-table-column>
                            <el-table-column
                                    prop="floor_id"
                                    label="所在楼层"
                                    width="140">
                                <template slot-scope="scope">
                                    <!--                                <i class="el-icon-time"></i>-->
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.floorId"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.floorId}}</span>
                                </template>
                                <!--                            <span>{{feePage.id}}</span>-->
                            </el-table-column>
                            <el-table-column
                                    prop="state"
                                    label="状态"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.state"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.state}}</span>
                                </template>
                                <!--                            <span>{{feePage.id}}</span>-->
                            </el-table-column>
                            <el-table-column
                                    prop="customer_id"
                                    label="当前入住人ID"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.customerId"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.customerId}}</span>
                                </template>
                                <!--                            <span>{{feePage.id}}</span>-->
                            </el-table-column>

                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-button @click="edit(scope.row,scope.$index)" type="text">
                                        {{scope.row.show?'':""}}<i
                                            class="el-icon-s-order"></i></el-button>

                                    <el-button @click="deletehouse(scope.row)" type="text"><i
                                            class="el-icon-delete"></i></el-button>

                                    <el-button @click="checkOut(scope.$index, scope.row)" type="text"><i
                                            class="el-icon-printer"></i>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>
        <div>
            <el-pagination class="housepage"
                           background
                           layout="prev, pager, next"
                           @size-change="handleSizeChange"
                           :current-page="currentPage"
                           :page-size="pageSize"
                           :total="total"
                           @current-change=page
            >
            </el-pagination>
        </div>
        <el-dialog title="添加房间" :visible.sync="addDialogVisible" width="50%"
                   @close="addDialogClosed">
            <!-- 内容主体区域 -->
            <el-form :model="addForm" :rules="addFormRules"
                     ref="addFormRef" label-width="85px">
                <el-form-item label="房间号" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>

                <el-form-item label="可住人数" prop="amount">
                    <el-input v-model="addForm.amount"></el-input>
                </el-form-item>

                <el-form-item label="单价" prop="price">
                    <el-input v-model="addForm.price"></el-input>
                </el-form-item>

                <el-form-item label="所在楼层" prop="floorId">
                    <el-input v-model="addForm.floorId"></el-input>
                </el-form-item>

            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addHouse">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script >
    import Home from "../../components/Home"
    export default {
        name: "House.vue",
        components: {Home},
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            queryHouse() {
                const _this = this
                _this.$axios.get('/house/housePage').then(res => {
                    // 将数据传入tableData
                    _this.tableData = JSON.parse(res.request.response).data.records

                }).catch(function (err) {
                    console.log(err)
                });

            },

            edit(row, index) {
                row.show = !row.show
                // console.log("feeedit"+JSON.stringify(this.feePage))
                // console.log("tableData"+JSON.stringify(this.tableData))
                const _this = this
                _this.$axios.post('/house/edit', _this.tableData[index], {
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                })
            },

            deletehouse(row){
                const _this = this
                    _this.$axios.delete('/house/deleteById/' +row.id).then(function(res){
                        console.log(res)
                        _this.$alert('《'+row.name+'》删除成功！', '消息', {
                            confirmButtonText: '确定',
                            callback: action => {
                                window.location.reload()
                            }
                        });
                    })
            },

            page(currentPage) {
                const _this = this
                _this.$axios.get('/house/housePage?currentPage=' + currentPage).then(res => {
                    _this.housePage = res.data.data.records
                    _this.currentPage = res.data.data.current
                    _this.total = res.data.data.total
                    _this.pageSize = res.data.data.size

                    //分页拿到数据重新赋值渲染页面
                    _this.tableData = JSON.parse(res.request.response).data.records
                })
            },

            checkOut(row) {
                const _this = this
                _this.$axios.get('/house/housePage').then(res => {
                    this.$router.push("/FeePrint/" + JSON.parse(res.request.response).data.records[row].id);
                }).catch(function (err) {
                    console.log(err)
                })
            },
            addDialogClosed() {
                this.$refs.addFormRef.resetFields();
            },
            addHouse(){
                this.$refs.addFormRef.validate(async valid => {
                    console.log(valid);
                    if (!valid) return;
                    // 发起请求
                    const _this = this
                    _this.$axios.post("/house/addHouse", this.addForm).then(res => {
                        var info = JSON.parse(res.request.response).data.info
                        if ( info == "success" ) {
                            this.$message.success("操作成功！！！");
                        }else{
                            this.$message.error("操作失败！！！");
                        }
                        //隐藏
                        this.addDialogVisible = false;
                        this.queryHouse();
                    })
                })
            },
        },


        data() {
            return {
                housePage: {},
                currentPage: 1,
                total: 0,
                pageSize: 5,
                tableData: [],

                addDialogVisible: false ,// 对话框显示
                // 添加用户表单项
                addForm: {
                    name:'',
                    amount:'',
                    price:'',
                    floorId:''
                },
                addFormRules:{
                    name:[
                        { required: true, message: "请输入房间号", trigger: "blur" },
                    ],
                    amount:[
                        { required: true, message: "请输入可住人数", trigger: "blur" },
                    ],
                    price:[
                        { required: true, message: "请输入单价", trigger: "blur" },
                    ],
                    floorId:[
                        { required: true, message: "请输入楼层", trigger: "blur" },
                    ],
                },
            }
        },
        created() {
            this.page(1)
            this.queryHouse()

            //修改数据
            //修改数据
            const _this = this
            _this.$axios.get('/house/housePage').then(res => {
                // console.log("11111" + JSON.parse(res.request.response).data.records[0].id)
                // 将数据传入tableData
                let list = JSON.parse(res.request.response).data.records

                let listSave = res.data.data.records
                list.forEach(element => {
                    element["show"] = false
                });
                _this.tableData = list
                _this.feePage = listSave
                // console.log("修改：" + _this.feePage[0].money)
            }).catch(function (err) {
                console.log(err)
            });
        }
    }
</script>

<style scoped>
    .housepage {
        margin: 0 auto;
        text-align: center;
    }
</style>